<template>
	<view class="container">
		<view class="bg"></view>
		<!-- 我的信息 -->
		<view class="my-title">
			<image :src="imgPath + bossDetail.user.avatar+'?imageView2/1/w/80/h/80'" mode="aspectFill"></image>
			<view class="name">
				<text>{{ bossDetail.user.userName }}</text>
				<image :src="bossDetail.user.sex==1 ? '/static/icon1/21.png' : '/static/icon1/55.png'"
					mode="aspectFill"></image>
			</view>
			<view class="category">
				<view>
					<text>{{ publicWorkNum ? publicWorkNum : 0}}</text>
					<!-- <text v-if="publicWorkNum">
						<u-count-to :fontSize="44"  color="#F39B19" :startVal="0" :endVal="publicWorkNum"  :duration="800"></u-count-to>
					</text>
					<text v-else>0</text> -->
					<view>发单数</view>
				</view>
				<!-- 	<view>
					<text>{{ acceptTaskNum ? acceptTaskNum : 0}}</text>
					<view>接单记录</view>
				</view> -->
				<view>
					<text>{{ bossDetail.integrity/100 }}</text>
					<!-- <text>
						<u-count-to  :fontSize="44" color="#F39B19" :startVal="1" :endVal="bossDetail.integrity/100" :decimals="2"  :duration="500"></u-count-to>
					</text> -->
					<view>诚信值</view>
				</view>
			</view>
		</view>
		<!-- 新增信息展示 -->
		<!-- Object.keys(bossDetail).length !== 0 -->
		<view class="info my-info" v-if="Object.keys(bossDetail).length !== 0">
			<view class="mm-tips" v-if="userType==1 && isShowFirst && false" @click="handleClose">
				<image src="../../static/ggrz.png" mode="widthFix"></image>
			</view>
			<view class="mm-tips" v-if="!bossDetail.taskAccuracy && userType==1" @click="handleClose" style="top: -5%;">
				<image src="../../static/rwbz.png" mode="widthFix"></image>
			</view>
			<view class="my-info-center">
				<view class="my-info-center-item">
					<view class="my-info-center-item-left">
						<text>综合好评率</text>
					</view>
					<view class="my-info-center-item-mid">
						<u-line-progress :height="24" :showText="false"
							activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
							:percentage="pingjia.comprehensivePositiveRating*100"></u-line-progress>
					</view>
					<view class="my-info-center-item-right">
						<text
							v-if="pingjia.comprehensivePositiveRating">{{(pingjia.comprehensivePositiveRating*100).toFixed(0)}}%</text>
						<text v-else>0%</text>
					</view>
				</view>
				<!-- 发单准确率 -->
				<view class="my-info-center-item">
					<view class="my-info-center-item-left">
						<text>发单准确率</text>
						<view class="tips3">
							<uni-tooltip :styleType="1" :styleType2="1" :styleType3="1" content="雇主发布时长和雇员实际工作时长的比例">
								<image src="../../static/helpwen.png" mode="widthFix"></image>
							</uni-tooltip>
						</view>
					</view>
					<view class="my-info-center-item-mid">
						<u-line-progress :height="24" :showText="false"
							activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
							:percentage="pingjia.orderAccuracy*100"></u-line-progress>
					</view>
					<view class="my-info-center-item-right">
						<text v-if="pingjia.orderAccuracy">{{(pingjia.orderAccuracy*100).toFixed(0)}}%</text>
						<text v-else>0%</text>
					</view>
				</view>
				<!-- 试工通过率 -->
				<view class="my-info-center-item">
					<view class="my-info-center-item-left">
						<text>试工通过率</text>
						<view class="tips3">
							<uni-tooltip :styleType="1" :styleType2="1" :styleType3="1" content="雇员到达现场试工后通过次数的比例">
								<image src="../../static/helpwen.png" mode="widthFix"></image>
							</uni-tooltip>
						</view>
					</view>
					<view class="my-info-center-item-mid">
						<u-line-progress :height="24" :showText="false"
							activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
							:percentage="pingjia.trialPassRate*100"></u-line-progress>
					</view>
					<view class="my-info-center-item-right">
						<text v-if="pingjia.trialPassRate">{{(pingjia.trialPassRate*100).toFixed(0)}}%</text>
						<text v-else>0%</text>
					</view>
				</view>
				<!-- 当日结算率 -->
				<view class="my-info-center-item">
					<view class="my-info-center-item-left">
						<text>当日结算率</text>
						<view class="tips3">
							<uni-tooltip :styleType="1" :styleType2="1" :styleType3="1" content="雇员收工后，雇主在当日24点之前结算次数">
								<image src="../../static/helpwen.png" mode="widthFix"></image>
							</uni-tooltip>
						</view>
					</view>
					<view class="my-info-center-item-mid">
						<u-line-progress :height="24" :showText="false"
							activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
							:percentage="pingjia.dailySettlementRate*100"></u-line-progress>
					</view>
					<view class="my-info-center-item-right">
						<text
							v-if="pingjia.dailySettlementRate">{{(pingjia.dailySettlementRate*100).toFixed(0)}}%</text>
						<text v-else>0%</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 基本信息 -->
		<view class="info my-info" v-if="false">
			<text>基本信息</text>
			<view>
				<view>
					<view>
						<text>真实姓名</text>
						<text>{{ bossDetail.realName ? bossDetail.realName.replace(bossDetail.realName.slice(1), '**') : '**' }}</text>
					</view>
					<view>
						<text>身份</text>
						<text>{{ bossDetail.user.expectType }}</text>
					</view>
					<view>
						<text>年龄</text>
						<text>{{ bossDetail.user.age }}</text>
					</view>
				</view>
				<view>
					<view>
						<text>身高 (cm)</text>
						<text>{{ bossDetail.user.stature }}</text>
					</view>
					<view>
						<text>学历</text>
						<text>{{ bossDetail.user.edu }}</text>
					</view>
					<view>
						<text>日常活动地区</text>
						<text>{{ street[bossDetail.user.expectAddress] }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 期望工种  -->
		<!-- <view class="info expect-work">
			<text>期望工种</text>
			<view class="tags" v-if="workTypeList.length">
				<text v-for="item in workTypeList">{{ item }}</text>
			</view>
		</view> -->
		<!-- ta -->
		<!-- 类目 -->
		<view class="category">
			<!-- <view :class="flag == 1 ? 'select' : ''" @tap="handleTypeChange(1)"
				:style="{'border-bottom-right-radius': flag == 1 ? '7px' : ''}">ta的评价</view> -->
			<view class="title"> 评价 </view>
			<view class="btns">
				<view class="btn">
					<image src="/static/icon3/satisfied1.png" mode=""></image> 满意({{satisfied}})
				</view>
				<view class="btn">
					<image src="/static/icon3/satisfied2.png" mode=""></image> 不满意({{dissatisfied}})
				</view>
				<view class="haoping-btn">
					<text>默认好评</text>
					<switch :checked="defaultHaoping" class="switch" @change="handleChange" color="#FF851D" />
				</view>
			</view>
		</view>
		<view class="ta">
			<!-- ta的工作 -->
			<view class="job-list" v-show="flag==0">
				<view>
					<view>
						<text>发单记录</text>
						<text>({{ publicWorkNum ? publicWorkNum : 0 }})</text>
					</view>
					<view class="list">
						<view v-for="(item, index) in publicWorkList" :key="index">
							<view></view>
							<view>{{ item }}</view>
						</view>
						<uni-load-more :status="hasWorkFlag ? 'loading' : isNoMore ? 'noMore' : ''"></uni-load-more>
					</view>
				</view>
				<!-- <view>
					<view>
						<text>接单记录</text>
						<text>({{ acceptTaskNum ? acceptTaskNum : 0 }})</text>
					</view>
					<view class="list">
						<view v-for="item in acceptTaskList">
							<view></view>
							<view>{{ item }}</view>
						</view>
					</view>
				</view> -->
			</view>
			<!-- ta的评价 -->
			<view class="comment-list" v-show="flag==1" v-if="evaluateList.length>0">
				<view class="item" v-if="parseInt(item.score)>2" v-for="item in evaluateList" :key="item.id">
					<view class=" by-user">
						<view class="left">
							<!-- <image :src="imgPath + item.avatar" mode="aspectFill"></image> -->
							<image src="http://images.linglinggong.net/FqbM4OLbmiUwDDB984eZl5lJudxS" mode="aspectFill">
							</image>
							<view class="middle">
								<view>{{ item.userName }}</view>
								<text>{{item.createTime.slice(0, 11) }}</text>
							</view>
						</view>
						<view class="star">
							<!-- <view>
								<image v-for="(item,index) in 5" :key="index" @click="handleStar(index)"
									src="/static/icon1/18.png" mode="aspectFill"></image>
							</view>
							<view>
								<image v-for="(item,index) in parseInt(item.score)" :key="index"
									@click="handleStar(index)" src="/static/icon1/19.png" mode="aspectFill"></image>
							</view> -->
							<view class="">
								<image src="/static/icon3/satisfied3.png" mode=""></image> 满意
							</view>
						</view>
					</view>
					<view class="content">{{ item.appraise }}</view>
				</view>
				<view class="zhedie" v-if="!defaultHaoping"> 已折叠{{defaultHaopingListLength}}条默认好评 </view>
				<uni-load-more :status="hasFlagEvaluate ? 'loading' : isNoMore ? 'noMore' : ''"></uni-load-more>
			</view>
			<view class="nohave" v-if="evaluateList.length<=0">
				<image src="../../static/empty1.png" mode=""></image>
			</view>
		</view>
		<!-- 收藏 -->
		<view class="fix-bottom" :class="isCollect ? 'hasCollect' : ''" @click="handleCollect" v-if="userType==0">
			{{ isCollect ? '已收藏' : '收藏'}}
		</view>
		<view class="mask-head-image" v-if="isShowheadImage" @click="isShowheadImage=false">
			<image :src="imgPath + bossDetail.user.avatar" mode="aspectFill"
				:style="{width: screenWidth + 'px', height:screenHeight + 'px' }"></image>
		</view>
	</view>
</template>
<script>
	import {
		he_evaluate_lv,
	} from '@/libs/unit.js'
	export default {
		data() {
			return {
				screenWidth: '0',
				screenHeight: '0', //获取手机宽高
				isShowFirst: false,
				userType: uni.getStorageSync('userType'),
				workRow: [], //接单列表拼接
				hasFlagEvaluate: true, // 是否还有更多评价要加载
				hasWorkFlag: true, // 是否还有更多数据要加载
				evaluateList: [], //评价列表
				// publicFlag: false,//查看更多
				hasShadow: false, //顶部导航是否有阴影
				flag: 1, //更改类目
				isCollect: 0, //是否收藏
				imgPath: '', //图片路径
				bossId: '', //雇主id
				bossDetail: {
					user: {},
					params: {}
				}, //当前用户信息
				street: {}, //街道
				expect_type: {}, //身份
				workTypeList: [], //期望工种
				evaluateObj: { //他的评价参数
					pageNum: 0,
					pageSize: 1000,
					type: 1,
					userId: '',
				},
				workObj: { //他的工作
					pageNum: 0,
					pageSize: 10,
					userId: '',
					orderByColumn: 'create_time',
					isAsc: 'asc',
				},
				acceptTaskList: [], //接单工作
				acceptTaskNum: '', //接单数量
				publicWorkList: [], //发单工作
				publicWorkNum: '', //发单数量
				handleIsStop: true, // 是否允许查看更多
				isShowheadImage: false,
				isNoMore: false,
				pingjia: {},
				satisfied: '',
				dissatisfied: '',
				defaultHaoping: true,
				originEvaluateList: [],
				defaultHaopingList: [],
				defaultHaopingListLength: ''
			}
		},
		methods: {
			handleChange(e) {
				this.defaultHaoping = e.detail.value
				this.defaultHaopingList = this.evaluateList.filter((item) => {
					return item.appraise == "系统默认好评"
				})
				this.defaultHaopingListLength = this.defaultHaopingList.length
				if (!this.defaultHaoping) {
					this.evaluateList = this.evaluateList.filter((item) => {
						return item.appraise !== "系统默认好评"
					})
				} else {
					this.evaluateList = this.originEvaluateList
				}
			},
			async statistical_positive_review_rate() {
				let res = await this.$fetch(this.$api.statistical_positive_review_rate, {
					userId: this.bossId
				}, 'POST')
				if (res.code) uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.satisfied = res.data.satisfied
				this.dissatisfied = res.data.dissatisfied
			},
			async employer_evaluation() {
				let res = await this.$fetch(this.$api.employer_evaluation, {
					userId: this.bossId
				}, 'POST')
				if (res.code) uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.pingjia = res.data
			},
			handleClose() {
				this.isShowFirst = false
				uni.setStorageSync('xinshouXqd', true)
			},
			// 查看更多
			handleMore(flag) {
				if (flag == 'public') {
					this.he_task() //再次调用接口
				} else {}
			},
			// 更改类目
			handleTypeChange(a) {
				this.flag = a
				this.isNoMore = false
			},
			// 获取雇主信息
			async get_user_by_id() {
				let res = await this.$fetch(this.$api.findUserById, {
					userId: this.bossId
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 整理数据,res.data.user为null，则改为""
				Object.getOwnPropertyNames(res.data.user).forEach(function(key) {
					res.data.user[key] = res.data.user[key] == null ? '' : res.data.user[key]
				})
				this.workTypeList = []
				// 初始化期望工种
				if (res.data.user.expectWorkType) {
					res.data.user.expectWorkType.split(',').forEach((item) => {
						this.workTypeList.push(item)
					})
				}
				he_evaluate_lv(res.data.userId).then((v) => {
					res.data.haoping = v
				})
				// let haoping = uni.getStorageSync('heEvaluateLv') ? uni.getStorageSync('heEvaluateLv') : []
				// if (haoping.indexOf(res.data.userId) != -1) {
				// 	res.data.haoping = haoping[haoping.indexOf(res.data.userId) + 1]
				// } else {
				// 	he_evaluate_lv(res.data.userId).then((v) => {
				// 		res.data.haoping = v
				// 	})
				// }
				setTimeout(() => {
					this.bossDetail = res.data
					if (!this.bossDetail.haoping) {
						this.isShowFirst = true
					}
				}, 100)
				// console.log('好评：', this.bossDetail.haoping)
			},
			// 是否收藏
			async is_collect() {
				let res = await this.$fetch(this.$api.is_collect, {
					relationId: this.bossId,
					type: 0
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// console.log('res.data',res.data)
				this.isCollect = res.data.collect
			},
			// 收藏或取消收藏 0是雇主
			async handleCollect() {
				let requestObj = {
					relationId: this.bossId,
					type: 0, //0是雇主，1雇员，2是任务
				}
				if (this.isCollect == 0) {
					let res = await this.$fetch(this.$api.add_collect, requestObj, 'POST', 'JSON')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.isCollect = 1
				} else {
					let res = await this.$fetch(this.$api.cancel_collect, requestObj, 'POST')
					if (res.code) return uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.isCollect = 0
				}
			},
			// 获取他的评价
			async he_evaluate() {
				if (!this.hasFlagEvaluate) return // 说明已经没有更多啦
				this.evaluateObj.pageNum = ++this.evaluateObj.pageNum
				this.evaluateObj.type = 1 //1看雇主
				this.evaluateObj.userId = this.bossId
				let res = await this.$fetch(this.$api.he_evaluate, this.evaluateObj, 'POST')
				if (res.code !== 0) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.evaluateList = [...this.evaluateList, ...res.rows]
				this.originEvaluateList = this.evaluateList
				console.log(this.evaluateList, 'this.evaluateList')
				this.hasFlagEvaluate = this.evaluateObj.pageSize * this.evaluateObj.pageNum < res.total
			},
			// 获取他的工作
			async he_task() {
				if (!this.hasWorkFlag) return // 说明已经没有更多啦

				++this.workObj.pageNum
				this.workObj.userId = this.bossId
				let res = await this.$fetch(this.$api.he_task, this.workObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 发单数据处理
				this.workRow = [...this.workRow, ...res.data.releaseTask.rows]
				this.publicWorkList = []
				this.workRow.forEach(item => {
					this.publicWorkList.push(item.name)
				})
				// console.log('this.publicWorkList', this.publicWorkList)
				this.publicWorkNum = res.data.releaseTask.total
				this.hasWorkFlag = this.workObj.pageSize * this.workObj.pageNum < this.publicWorkNum
				// 接单数据处理
				// 整理数据
				// res.data.acceptTask.rows.forEach(item => {
				// 	this.acceptTaskList.push(item.taskName) 
				// })
				this.acceptTaskNum = res.data.acceptTask.total
			},
		},
		created() {
			this.screenWidth = uni.getStorageSync("imgWidth") == '' ? 750 : uni.getStorageSync("imgWidth")
			this.screenHeight = uni.getStorageSync("imghight") == "" ? 750 : uni.getStorageSync("imghight")
		},
		onLoad(options) {
			this.bossId = options.bossId
			this.street = uni.getStorageSync('street')
			this.expect_type = uni.getStorageSync('expect_type')
			this.work_type = uni.getStorageSync('work_type')
			if (!uni.getStorageSync('xinshouXqd')) {
				this.isShowFirst = true
			}
			this.is_collect()
			this.he_evaluate()
			this.he_task()
		},
		onShow() {
			this.imgPath = uni.getStorageSync('imgPath')
			this.get_user_by_id()
			this.employer_evaluation()
			this.statistical_positive_review_rate()
		},
		onReachBottom() {
			this.isNoMore = true
			this.he_task()
			this.he_evaluate()
		}
	}
</script>
<style lang="less">
	.container {
		border-top: 1px solid #FCC928; //不能删，ios会报损
		border-bottom: 1px solid #FCC928; //不能删，ios会报损
		border-bottom-color: rgba(252, 201, 40, 0); //不能删，ios会报损
		background-color: #F1F1F5;

		&>.bg {
			height: 318rpx;
			justify-content: flex-end;
			position: relative;
			overflow: hidden;

			//椭圆
			&::after {
				content: "";
				position: absolute;
				width: 200%;
				height: 348rpx;
				border-radius: 100%;
				left: -50%;
				top: -30rpx;
				background: #FCC928;
			}
		}

		&>.my-title {
			position: relative;
			padding-bottom: 38rpx;
			border-radius: 7px 7px 0 0;
			margin: -204.6rpx 30rpx 0;
			box-shadow: 0 2px 14px 0 rgba(96, 52, 0, 0.1);
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;

			&>image {
				position: absolute;
				top: -75rpx;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			&>.name {
				height: 48rpx;
				margin: 96rpx 0 30rpx;
				display: flex;
				position: relative;
				align-items: center;

				&>text {
					font-size: 17px;
				}

				&>image {
					position: absolute;
					right: -46rpx;
					width: 26rpx;
					height: 26rpx;
				}
			}

			&>.category {
				background-color: #FFFFFF;
				display: flex;
				width: 100%;

				&>view {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;

					&>text {
						font-size: 22px;
						color: #F39B19;
						height: 60rpx;
						margin-bottom: 10rpx;
					}

					&>view {
						height: 34rpx;
						font-size: 12px;
						color: rgba(64, 33, 16, 0.70);
						text-align: center;
						margin-right: 2rpx;
					}

					&::after {
						content: "";
						position: absolute;
						right: 0rpx;
						width: 2rpx;
						height: 50rpx;
						background: #F0F0EF;
						border-radius: 2.5px;
					}
				}
			}
		}

		&>.info {
			background-color: #FFFFFF;
			margin: 0 30rpx 60rpx 30rpx;
			padding: 30rpx;

			&>text {
				height: 40rpx;
				position: relative;
				text-align: center;
				font-weight: bold;
				display: flex;
				align-items: center;

				&::before {
					content: "";
					position: absolute;
					left: -30rpx;
					width: 4rpx;
					height: 28rpx;
					background: #FCC928;
					border-radius: 1px;
				}
			}
		}

		.my-info-center {
			// border: 1px solid;
			width: 100%;
			height: 100%;
			margin-top: -30rpx;
			// background: red;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.my-info-center-item {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.my-info-center-item-left {
					position: relative;
					width: 160rpx;
					padding-right: 10rpx;

					// border: 1px solid;
					.tips3 {
						// border: 1px solid;
						position: absolute;
						right: 5%;
						top: -70%;
						z-index: 9;

						// width: 50rpx;
						// border: 1px solid;
						image {
							width: 50rpx;
							height: 100%;
						}
					}

					text {
						color: #000;
						font-size: 24rpx;
					}
				}

				.my-info-center-item-mid {
					flex: 1;
					// border: 1px solid;
				}

				.my-info-center-item-right {
					width: 70rpx;
					margin-left: 15rpx;
					// border: 1px solid;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;

					text {
						color: #F67700;
					}
				}
			}
		}

		&>.my-info {
			box-shadow: 0 2px 4px 0 rgba(96, 52, 0, 0.10);
			border-radius: 0 0 7px 7px;
			position: relative;

			.mm-tips {
				width: 106%;
				position: absolute;
				// border: 1px solid;
				top: -8%;
				left: -22rpx;
				z-index: 99999;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&>view {
				display: flex;
				justify-content: space-between;

				&>view {
					&>view {
						margin-top: 30rpx;

						text:first-child {
							color: rgba(64, 33, 16, 0.50);
							// margin-right: 30rpx;
						}
					}
				}
			}
		}

		&>.expect-work {
			box-shadow: 0 2px 4px 0 rgba(96, 52, 0, 0.10);
			border-radius: 7px;

			&>.tags {
				height: 52rpx;
				margin-top: 20rpx;
				display: flex;

				text {
					line-height: 40rpx;
					padding: 8rpx 18rpx;
					color: #F39B19;
					background: rgba(243, 155, 25, 0.15);
					border-radius: 2px;
					margin-right: 30rpx;
				}
			}
		}

		&>.category {
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			&>.title {
				position: relative;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 36rpx;
				font-weight: bold;
			}

			&>.btns {
				display: flex;

				&>.btn {
					width: 180rpx;
					height: 60rpx;
					border-radius: 6rpx;
					border: 1px solid #FF851D;
					text-align: center;
					line-height: 60rpx;
					margin-right: 20rpx;
					color: #FF851D;
					display: flex;
					justify-content: space-around;
					align-items: center;

					&>image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				&>.haoping-btn {
					font-size: 28rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					margin-left: 50rpx;

					&>.switch {
						transform: scale(0.7);
					}
				}
			}
		}

		&>.ta {
			border-radius: 7px;
			margin: 30rpx 30rpx 130rpx;
			box-shadow: 0 2px 4px 0 rgba(96, 52, 0, 0.1);
			background-color: #FFFFFF;

			&>.comment-list {
				background-color: #FFFFFF;
				border-radius: 7px;

				&>.item {
					position: relative;
					padding: 30rpx;

					&>.by-user {
						display: flex;
						justify-content: space-between;

						&>.left {
							display: flex;
							align-items: center;

							image {
								width: 70rpx;
								height: 70rpx;
								border-radius: 50%;
								margin-right: 30rpx;
							}

							&>.middle {
								font-size: 12px;

								&>view {
									height: 34rpx;
									margin-bottom: 10rpx;
								}

								&>text {
									color: rgba(64, 33, 16, 0.50);
									height: 34rpx;
								}
							}
						}

						&>.star {
							margin-right: 20rpx;

							&>view {
								display: flex;
								align-items: center;

								&>image {
									width: 40rpx;
									height: 40rpx;
									margin-right: 10rpx;
								}
							}
						}
					}

					&>.content {
						margin-left: 100rpx;
					}

					//横线
					&::before {
						content: "";
						position: absolute;
						bottom: 0rpx;
						width: 630rpx;
						height: 2rpx;
						background: #F2F2F2;
						border-radius: 1px;
					}
				}

				&>.item:last-child {
					&::before {
						display: none;
					}
				}

				&>.zhedie {
					font-size: 28rpx;
					font-weight: 500;
					text-align: center;
					margin-top: 50rpx;
				}
			}

			&>.job-list {
				position: relative;

				&>view {
					position: relative;
					padding: 30rpx;

					&>view:first-child {
						height: 40rpx;

						text {
							font-weight: bold;
						}
					}

					&::before {
						content: "";
						position: absolute;
						bottom: 0rpx;
						width: 630rpx;
						height: 2rpx;
						background: #F2F2F2;
						border-radius: 0.5px;
					}

					&>.list {
						&>view {
							line-height: 40rpx;
							display: flex;
							align-items: center;
							margin-top: 20rpx;

							&>view:first-child {
								background: rgba(64, 33, 16, 0.30);
								height: 10rpx;
								width: 10rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}

							&>view:last-child {
								height: 40rpx;
							}
						}
					}

					&>.more-button {
						position: absolute;
						right: 30rpx;
						bottom: 30rpx;
						display: flex;

						image {
							width: 14rpx;
							height: 8rpx;
							margin-left: 10rpx;
						}

						&>view {
							display: flex;
							align-items: center;
						}
					}
				}

				&>view:last-child {
					&::before {
						display: none;
					}
				}
			}
		}

		&>.fix-bottom {
			z-index: 1;
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FCC928;

			&.hasCollect {
				background-color: #D2B48C;
			}
		}
	}

	.mask-head-image {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000000;
		z-index: 9999;
	}

	.nohave {
		height: 444rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 251rpx;
			height: 219rpx;
		}
	}
</style>